import React from 'react';

const Com = (props) => {
  let value = props.value
  let size = props.size || 'normal'
  let paddVal = ''
  let fontVal = ''
  switch (size) {
    case 'large':
      paddVal = '10px 0'
      fontVal = '16px'
      break;
    case 'normal':
      paddVal = '8px 0'
      fontVal = '14px'
      break;
    case 'small':
      paddVal = '6px 0'
      fontVal = '12px'
      break;
    default:
      break;
  }

  let type = props.type || 'default';
  let bc = ''
  let activebc = ''
  let ftcolor = ''
  switch (type) {
    case 'default':
      bc = '#fff'
      activebc = '#ccc'
      ftcolor = '#666'
      break;
    case 'danger':
      bc = '#f66'
      activebc = '#d66'
      ftcolor = '#fff'
      break;
    case 'success':
      bc = '#f00'
      activebc = '#0d0'
      ftcolor = '#fff'
      break;
    default:
      break;
  }
  let disabled = props.disabled || false
  // bc = bc - 5;
  let opacity = 1;
  disabled ? opacity = 0.4 : opacity = 1
  return (
    <div style={{ border: '1px solid #efefef', background: bc, textAlign:'center', letterSpacing: '5px', color: ftcolor, padding: paddVal, fontSize: fontVal, opacity: opacity}} onClick = { () => {
      if (!disabled) {
        props.onClick()
      }
    }} onTouchStart={(event) => {
      event.target.style.background = activebc
    }} onTouchEnd={(event) => {
      event.target.style.background = bc
    }}>
      { value }
    </div>
  )
}

export default Com